<template>
  <div class="box">测试{{ store.a }}</div>
  <button @click="add">添加</button>
  <!--运用即为调用-->
  <testSlot>
    <template #default="data">
      <div>这里是父级的内容{{ store.a }} {{ data.a }} + {{ data.b }}</div>
    </template>
    <template #abc>abc的模板</template>
  </testSlot>
  <button @click="saveXlsx">保存到本地</button>
  <button @click="table2xlsx">table2xlsx</button>
  <table id="mytable">
    <tbody>
      <tr>
        <td>栏目1</td>
        <td>栏目2</td>
        <td>栏目3</td>
      </tr>
      <tr>
        <td>数据1-1</td>
        <td>数据1-2</td>
        <td>数据1-3</td>
      </tr>
      <tr>
        <td>数据2-1</td>
        <td>数据2-2</td>
        <td>数据2-3</td>
      </tr>
    </tbody>
  </table>
</template>
<script>
import testSlot from '../../components/testSlot.vue'
import store from '@/store/index.js'
import XLSX from '@/libs/xlsx.full.min.js';
export default{
  components : {
    testSlot
  },
  data(){
    return {
      a : 1,
      b : 2,
      store,
      list : [1,2,3,4,5]
    }
  },
  methods : {
    add(){
      this.store.add();
    },
    //传入了一个函数，然后给模板内部调用
    abc(slotScope){
      return this.a + this.b + slotScope.a + slotScope.b;
    },
    saveXlsx(){
      console.log(XLSX);
      const wb = XLSX.utils.book_new();
      const ws = XLSX.utils.aoa_to_sheet([["a","b","c"],[1,2,3]]);
      XLSX.utils.book_append_sheet(wb, ws, "abc");
      XLSX.writeFile(wb, "SheetJSESMTest.xlsx");
    },
    table2xlsx(){
      let table = document.getElementById('mytable');
      const ws = XLSX.utils.table_to_sheet(table);
      const wb = XLSX.utils.book_new();
      XLSX.utils.book_append_sheet(wb,ws,'表格1');
      XLSX.writeFile(wb,'表格1.xlsx');
    }
  },
  mounted(){
  }
}
</script>
<style lang="scss">
  .box{
    width:100px;
    height:100px;
    border:1px solid #000;
  }
</style>
